---
order: 1.5
category: '@threlte/extras'
title: '<Text3DGeometry>'
sourcePath: 'packages/extras/src/lib/components/Text3DGeometry/Text3DGeometry.svelte'
type: 'component'
componentSignature:
  {
    'props':
      [
        {
          name: 'font',
          type: 'Font | string',
          required: true,
          description: 'Either a loaded font or a path to a font file.'
        },
        { name: 'text', type: 'string', required: true, description: 'The text to display.' },
        { name: 'size', type: 'number', required: false, default: '100' },
        { name: 'height', type: 'number', required: false, default: '50' },
        { name: 'curveSegments', type: 'number', required: false, default: '12' },
        { name: 'bevelEnabled', type: 'boolean', required: false, default: 'false' },
        { name: 'bevelThickness', type: 'number', required: false, default: '10' },
        { name: 'bevelSize', type: 'number', required: false, default: '8' },
        { name: 'bevelOffset', type: 'number', required: false, default: '0' },
        { name: 'bevelSegments', type: 'number', required: false, default: '3' },
        {
          name: 'smooth',
          type: 'number',
          required: false,
          default: '0',
          description: 'Smooth all edges where the angle between faces is less than value'
        },
        { name: 'depth', type: 'number', required: false, default: '1' },
        { name: 'extrudePath', type: 'Curve<Vector3>', required: false },
        { name: 'steps', type: 'number', required: false, default: '1' },
        { name: 'UVGenerator', type: 'UVGenerator', required: false }
      ]
  }
---

Render 3D text as a geometry using Three.js' [TextGeometry](https://threejs.org/docs/index.html#examples/en/geometries/TextGeometry).

<Example path="extras/text-3d-geometry" />

## Examples

### Basic Example

```svelte title="Scene.svelte"
<script lang="ts">
  import { T } from '@threlte/core'
  import { Text3DGeometry } from '@threlte/extras'
</script>

<T.Mesh>
  <Text3DGeometry text={'Hello World'} />
  <T.MeshStandardMaterial />
</T.Mesh>
```

### Using a Custom Font

If no `font` property is provided, the default font "Helvetiker" will be used
and loaded from the CDN
[JSDeliver](https://cdn.jsdelivr.net/npm/three/examples/fonts/helvetiker_regular.typeface.json).

If you want to use a custom font, you can generate a font using
[typeface.js](https://gero3.github.io/facetype.js/). Provide the path to the
resulting JSON file using the prop `font`.

### Suspense-Ready

The component `<Text3DGeometry>` is _suspense-ready_. Using it in a
[`<Suspense>` boundary](/docs/reference/extras/suspense) will suspend
rendering until the provided font is loaded:

```svelte title="Scene.svelte"
<script lang="ts">
  import { T } from '@threlte/core'
  import { Text3DGeometry, Suspense } from '@threlte/extras'
  import Fallback from './Fallback.svelte'
</script>

<Suspense>
  <T.Mesh>
    <Text3DGeometry
      font={'path-to-your-font'}
      text={'Hello World'}
    />
    <T.MeshStandardMaterial />
  </T.Mesh>

  {#snippet fallback()}
    <Fallback />
  {/snippet}
</Suspense>
```

### Loading a Font Yourself

You can also load the font yourself and pass it to the component, like so:

```svelte title="Scene.svelte"
<script lang="ts">
  import { T, useLoader } from '@threlte/core'
  import { Text3DGeometry } from '@threlte/extras'
  import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js'

  let font = useLoader(FontLoader).load('path-to-your-font')
</script>

{#if $font}
  <T.Mesh>
    <Text3DGeometry
      font={$font}
      text={'Hello World'}
    />
    <T.MeshStandardMaterial />
  </T.Mesh>
{/await}
```

### Centering Text

You can center a text by using the [`<Align>` component](/docs/reference/extras/align) and calling the align slot prop when the text geometry is created.

```svelte title="Scene.svelte"
<Align>
  {#snippet children({ align })}
    <T.Mesh>
      <Text3DGeometry
        font={'path-to-your-font'}
        text={`Hello!`}
        oncreate={align}
      />
      <T.MeshStandardMaterial />
    </T.Mesh>
  {/snippet}
</Align>
```

### Smoothing Text

You can smooth the text by setting the `smooth` prop to a value above 0 to smooth all edges where the angle between faces is less than the `smooth` value.
